<template>
  <div class="tabbar">
    <router-link
      class="tab-item"
      v-for="(item, index) in data"
      :to="item.path"
      :key="index"
      active-class="is-selected"
    >
      <div class="tab-item-icon">
        <i :class="`fa fa-${item.icon}`"></i>
      </div>
      <div class="tab-item-label">{{ item.title }}</div>
    </router-link>
  </div>
</template>
<script>
export default {
  name: "tabbar",
  props: {
    data: Array,
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  color: #999;
}
.tabbar {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background: #fafafa;
}
.tabbar .tab-item {
  flex: 1;
}

.tab-item-icon {
  width: 20px;
  height: 20px;
  margin: 0 auto 5px;
}
.tab-item-icon i {
  font-size: 16px;
}
.tab-item-label {
  color: inherit;
  font-size: 10px;
  line-height: 1;
}
.is-selected {
  color: #009eef;
}
</style>

